<template>
	<view class="container">
		<view class="bluetooth-status">
			<image src="/static/lanya.png" class="icon"></image>
			<view class="desc" v-if="bluetoothStatus">蓝牙已开启，连接成功！</view>
			<view class="desc" v-else @click="bluetoothReset">蓝牙未连接，<text
					style="color: blue;text-decoration: underline;">点击连接</text></view>
			<view class="num">机器：{{equipmentNo}}</view>
		</view>
		<view class="bluetooth-place"></view>
		<view class="product-wrapper m-20-25-0" v-for="(shop, index) in orderDetails.shops" :key="index">
			<view class="top-wrapper">
				<image src="/static/seller.png" class="icon"></image>
				<view class="name ell">{{shop.shopName}}</view>
			</view>
			<view class="list">
				<view class="product-item" v-for="product in shop.products" :key="product.productId">
					<image :src="product.productImage" class="img" mode="aspectFill"></image>
					<view class="text">
						<view class="name ell">{{product.productName}}</view>
						<view class="specifications ell" v-if="product.normal">{{product.normal}}</view>
						<view class="num">x{{product.num}}</view>
					</view>
					<view class="price">¥{{product.price}}</view>
				</view>
			</view>
			<view class="total-amount border-top">小计 ¥{{shop.shopTotalFee}}</view>
		</view>
		<view class="remark-wrapper m-20-25-0">
			<view class="title">商家留言</view>
			<input type="text" v-model="remark" placeholder="对商家留言" />
		</view>
		<view class="payment-method-wrapper">
			<view class="title">选择支付方式</view>
			<view class="payment-method">
				<view class="payment-method-item" @click="selectPayMethod(1)">
					<image src="/static/balance.png" class="icon"></image>
					<view class="text">余额支付</view>
					<view class="checkbox-wrapper" :class="{'on': payMethod == 1}">
						<image class="checkbox on" src="/static/checkbox_on.png"></image>
						<image class="checkbox off" src="/static/checkbox.png"></image>
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="payment-method-item wechat" @click="selectPayMethod(2)">
					<image src="/static/wechat.png" class="icon"></image>
					<view class="text">微信支付</view>
					<view class="checkbox-wrapper" :class="{'on': payMethod == 2}">
						<image class="checkbox on" src="/static/checkbox_on.png"></image>
						<image class="checkbox off" src="/static/checkbox.png"></image>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<view class="payment-method-item alipay" @click="selectPayMethod(3)">
					<image src="/static/alipay.png" class="icon"></image>
					<view class="text">支付宝支付</view>
					<view class="checkbox-wrapper" :class="{'on': payMethod == 3}">
						<image class="checkbox on" src="/static/checkbox_on.png"></image>
						<image class="checkbox off" src="/static/checkbox.png"></image>
					</view>
				</view>
				<!-- #endif -->
			</view>

			<view class="submit_ok">提交订单后，请保持蓝牙连接，以确保柜门开启</view>

		</view>
		<view class="bottom-menu">
			<view class="total-amount">
				<text class="small"><text class="black">合计：</text>¥</text>{{orderDetails.totalFee}}
			</view>
			<button type="default" :disabled="submitFlag" class="btn" @click="createOrder">提交订单</button>
		</view>
		<view class="place"></view>
	</view>
</template>

<script>
	import {
		mechineConfirmOrder,
		mechineCreateOrder,
		openMechine
	} from '@/api/online.js'
	import {
		frontDetail
	} from '@/api/order.js'
	import payment from '@/mixins/payment.js'
	import bluetoothDevice from '@/utils/bluetooth.js'
	export default {
		mixins: [payment],
		data() {
			return {
				equipmentNo: '',
				submitFlag: false,
				equipmentProductId: '',
				orderDetails: {},
				payMethod: '',
				remark: '',
				carIds: '',
				blueType: 2,
				timer: null,
				flag: true,
			}
		},
		computed: {
			bluetoothStatus() {
				return this.$store.getters.bluetoothStatus
			},
			bluetoothObj() {
				return this.$store.getters.bluetoothObj
			}
		},
		onShow() {
			const that = this
			/* 监听蓝牙设备的连接状态 */
			uni.onBLEConnectionStateChange(function(res) {
				console.log(res.deviceId + "连接状态*confir****:" + res.connected)
				if (res.connected == false) {
					that.$store.commit('user/UPDATE_STATUS', res.connected);
				}
			})
		},
		onLoad(option) {
			this.equipmentNo = option.equipmentNo
			this.equipmentProductId = option.equipmentProductId
			this.blueType = option.blue
			console.log('款式是什么款式', this.blueType)
			this.getMechineConfirmOrder()
		},
		methods: {
			// 重新链接
			bluetoothReset() {
				if (this.blueType == 1) {
					this.bluetoothObj.reset()
				} else {
					this.bluetooth(this.equipmentNo)
				}

				// this.bluetoothObj.reset()
			},
			// 获取订单
			getMechineConfirmOrder() {
				const data = {
					equipmentProductId: this.equipmentProductId
				}
				mechineConfirmOrder(data).then(respanse => {
					this.orderDetails = respanse.result
				})
			},


			// 生成订单
			createOrder() {
				if (!this.bluetoothStatus) {
					uni.showToast({
						title: '蓝牙已断开，请点击连接',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.payMethod) {
					uni.showToast({
						title: '请选择支付方式！',
						icon: 'none',
						duration: 2000
					})
					return
				}
				const data = {
					equipmentProductId: this.equipmentProductId,
					payMethod: this.payMethod,
					memo: this.remark
				}
				mechineCreateOrder(data).then(respanse => {
					console.log(respanse, '>>>>>机器创建订单成功')
					this.createOrderDetails = respanse.result
					this.payment(1, false, true)
					this.timer = setInterval(() => {
						this.getOrderState(respanse.result);
					}, 2000);
					// paymentType=1, isReturn=false, isBluetooth=false
				}).catch(err => {
					console.log(err, '>>>>>机器创建订单失败')
					this.submitFlag = false
				})
			},

			getOrderState(data) {
				let opt = {
					orderId: data.orderId
				}
				frontDetail(opt).then(res => {
					console.log('opt', res)
					if (res.result.status == 1 || res.result.status == 2) {
						clearInterval(this.timer);
						this.bluetoothCallback();
					}
				})
			},

			// 支付成功回调
			bluetoothCallback() {
				const data = {
					orderNo: this.createOrderDetails.orderNo
				}
				clearInterval(this.timer);
				this.$store.commit('user/UPDATE_WXPAY', false);
				console.log(data, '>>>>>支付成功回调打开机器请求参数')
				if (this.flag) {
					this.flag = false
					openMechine(data).then(respanse => {
						this.submitFlag = true
						console.log(respanse, '>>>>>打开机器请求成功', this.blueType)
						const _Buffer = respanse.result
						if (this.blueType == 1) {
							this.bluetoothObj.writeDevice(_Buffer)
						} else {
							this.sentOrder24(_Buffer)
						}
						setTimeout(() => {
							this.bluetoothObj.disconnectBle()
							uni.navigateBack()
						}, 1500)
					}).catch(err => {
						clearInterval(this.timer);
						console.log(err, '>>>>>打开机器请求失败')
						this.submitFlag = false
					})
				}

			},

			sentOrder24(slot) {
				var that = this;
				// 	let ksMid = this.getOrderStr('1625223474');
				// 	console.log('orderStr1')
				// 	console.log(ksMid)

				// 	let a = Number(slot).toString(16).toUpperCase()
				// 	let slotStr = a.length == 1 ? ('0x0' + a) : ('0x' + a)

				// 	var orderStr = '0XAA0X02' + ksMid + slotStr; //指令
				var orderStr = slot
				console.log('orderStr')
				console.log(orderStr)
				let typedArray = new Uint8Array(orderStr.match(/[\da-f]{2}/gi).map(function(h) {
					return parseInt(h, 16)
				}))
				let buffer1 = typedArray.buffer
				orderStr = buffer1
				this.write(orderStr);

			},
			getOrderStr(mid) {
				let strDl = mid;
				let getOrderStrs = '';
				for (var i = 0, len = strDl.length; i < len; i++) {
					getOrderStrs += '0x0' + strDl[i];
				}
				return getOrderStrs;
			},


			// 支付方式
			selectPayMethod(payMethod) {
				this.payMethod = payMethod
			}
		}
	}
</script>

<style lang="scss" scoped>
	.submit_ok {
		width: 100%;
		margin-top: 150rpx;
		text-align: center;
		font-size: 24rpx;
		color: #666666;
	}

	.bluetooth-status {
		position: fixed;
		left: 0;
		right: 0;
		display: flex;
		z-index: 2;
		align-items: center;
		padding: 0 43rpx 0 54rpx;
		background: #ED602B;

		.icon {
			width: 15rpx;
			height: 24rpx;
		}

		.desc {
			flex: 1;
			margin-left: 15rpx;
			line-height: 61rpx;
			font-size: 26rpx;
			color: #fff;
		}

		.num {
			line-height: 61rpx;
			font-size: 26rpx;
			color: #fff;
		}
	}

	.bluetooth-place {
		height: 61rpx;
		visibility: hidden;
	}

	.jus {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-right: 20rpx;
	}

	.datetime-picker {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
	}

	/deep/.uni-datetime-picker-text {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 104rpx;
		opacity: 0;
	}

	.checkbox-wrapper {
		display: flex;
		align-items: center;

		.checkbox {
			width: 28rpx;
			height: 28rpx;

			&.on {
				display: none;
			}

			&.off {
				display: block;
			}
		}

		&.on {
			.checkbox.on {
				display: block;
			}

			.checkbox.off {
				display: none;
			}
		}
	}

	.m-20-25-0 {
		margin: 20rpx 25rpx 0;
		background: #FFFFFF;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.address-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		height: 104rpx;
		box-sizing: border-box;
		padding: 34rpx 22rpx 25rpx 35rpx;
		background-color: #fff;

		&.he-auto {
			height: auto;
		}

		&::before {
			left: 25rpx;
			right: 22rpx;
		}

		.text {
			flex: 1;

			.con {
				font-size: 28rpx;
				color: #000000;
			}

			.address {
				line-height: 46rpx;
				font-size: 36rpx;
				color: #000000;
			}

			.name-tel {
				margin-top: 16rpx;
				line-height: 34rpx;
				font-size: 24rpx;
				color: #666666;
			}
		}

		.icon {
			width: 14rpx;
			height: 24rpx;
		}
	}

	.product-wrapper {
		padding-top: 32rpx;

		.top-wrapper {
			display: flex;
			padding-left: 32rpx;

			.icon {
				margin: 2rpx 16rpx 0 0;
				width: 34rpx;
				height: 35rpx;
			}

			.name {
				flex: 1;
				overflow: hidden;
				line-height: 40rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}
		}

		.list {
			padding-top: 18rpx;

			.product-item {
				display: flex;
				padding: 10rpx 23rpx 10rpx 32rpx;

				.img {
					width: 156rpx;
					height: 156rpx;
					border-radius: 10rpx;
					background-color: #F5F5F5;
				}

				.text {
					flex: 1;
					padding-top: 7rpx;
					margin-left: 38rpx;
					overflow: hidden;

					.name {
						line-height: 38rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #080808;
					}

					.specifications {
						margin-top: 6rpx;
						line-height: 32rpx;
						font-size: 22rpx;
						color: #818181;
					}

					.num {
						margin-top: 19rpx;
						line-height: 38rpx;
						font-size: 28rpx;
						color: #818181;
					}
				}

				.price {
					line-height: 38rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #080808;
				}
			}
		}

		.total-amount {
			position: relative;
			padding-right: 23rpx;
			margin-top: 22rpx;
			line-height: 100rpx;
			text-align: right;
			font-size: 30rpx;
			font-weight: bold;
			color: #040404;
		}
	}

	.remark-wrapper {
		display: flex;
		padding-left: 24rpx;

		.title {
			line-height: 88rpx;
			font-size: 28rpx;
			color: #040404;
		}

		input {
			flex: 1;
			display: block;
			padding: 0 23rpx 0 20rpx;
			width: 100%;
			height: 88rpx;
			box-sizing: border-box;
			text-align: right;
			font-size: 28rpx;
			color: #040404;
		}
	}

	.payment-method-wrapper {
		margin: 0 25rpx 0;

		.title {
			line-height: 80rpx;
			font-size: 28rpx;
			color: #333333;
		}

		.payment-method {
			padding: 9rpx 0;
			background: #FFFFFF;
			border-radius: 10rpx;

			.payment-method-item {
				display: flex;
				align-items: center;
				padding: 24rpx 25rpx 24rpx 19rpx;

				.icon {
					width: 36rpx;
					height: 36rpx;
				}

				.text {
					flex: 1;
					margin-left: 19rpx;
					line-height: 36rpx;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}

	.bottom-menu {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		// background: #4CD964;
		display: flex;
		padding: 12rpx 16rpx;
		background-color: #fff;
		padding-bottom: 40rpx;

		.total-amount {
			flex: 1;
			margin-right: 37rpx;
			text-align: right;
			line-height: 80rpx;
			font-size: 46rpx;
			color: #EB6E37;

			.small {
				font-size: 26rpx;

				.black {
					color: #000000;
				}
			}
		}

		.btn {
			width: 220rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			color: #fff;
			border-radius: 40rpx;
			background: linear-gradient(90deg, #EB7C3F, #EA5D2E);
		}
	}

	.place {
		height: 124rpx;
		visibility: hidden;
	}
</style>
